<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>VuetifyJS-Paginations 分页测试</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
    <style>
        .v-text-field__details{
            display: none;
        }
    </style>
</head>
<body>
<div id="app">
    <v-app>
        <v-main>
            <v-container>
                <template>
                    <div>当前页码 {{page.current}}</div>
                    <v-row justify="center">
                        <v-col cols="6">
                            <v-pagination
                                    v-model="page.current"
                                    :length="page.total"
                            ></v-pagination>
                        </v-col>
                        <v-col cols="1">
                            <v-text-field
                                    label="跳转到"
                                    placeholder="跳转到"
                                    solo
                                    dense
                                    clearable
                                    v-model="input"
                                    @change="change()"
                            ></v-text-field>
                        </v-col>
                    </v-row>

                </template>
            </v-container>
        </v-main>
    </v-app>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script>
    new Vue({
        el: '#app',
        vuetify: new Vuetify(),
        data() {
            return {
                page: {
                    current: 1,
                    size: 10,
                    total: 1000
                },
                input: null
            }
        },
        methods:{
            change(){
                this.page.current = Number(this.input)
            }
        }
    })
</script>
</body>
</html>